<template>
	<view class="global">
		<view class="detail">
			<view class="teacherimg">
				<image :src="obj.teacher.avatar" mode=""></image>
				
			</view>
			<view class="name">
				{{obj.teacher.name}}
			</view>
			<view class="info">
				{{obj.teacher.intro}}
			</view>
		</view>
		<view class="zjkc">
			<view class="zjkctitle">
				主讲课程
			</view>
			<view class="kechenglist" v-for="(item,index) in obj.courseList">
				<view class="kechengimg">
					<img :src="item.cover" alt="" />
			
				</view>
				<view class="kecinfo">
					<view class="kctitle">
						{{item.title}}
					</view>
					<view class="kcbottom">
						<view class="price" style="color: #4db5fb;">
							{{item.price}}
						</view>
						<view class="subjj">
							{{item.buyCount}}次购买
						</view>
			
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted ,ref} from 'vue';
import instance from '../../request';
	onLoad(e=>{
		console.log(e)
		getlist(e)
	})
	const obj=ref({})
	const getlist=async(e)=>{
		const res=await instance.get(`/api/edu/teacher/${e.id}`)
		console.log(res)
	 obj.value=res.data
	}
	onMounted(()=>{
		
	})
</script>

<style>
	.kechenglist {
		width: 100%;
		height: auto;
		padding: 10px;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 10px;
		overflow: hidden;
	}
	
	.kechengimg {
		width: 120px;
		height: 72px;
		float: left;
	
	}
	
	.kechengimg image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	
	.kecinfo {
		width: calc(100% - 130px);
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		float: right;
	}
	
	.kctitle {
		font-size: 12px;
		color: #a1a7b2;
	}
	
	.kcbottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}
	
	.subjj {
		font-size: 12px;
	}
	
	.price {
	
		font-size: 12px;
	}
	.zjkc{
		margin-top: 10px;
		background: #fff;
	}
	.zjkctitle{
		width: 100%;
		height: 30px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 30px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.info{
	
			font-size: 12px;
			color: #888;
			line-height: 30px;
			
		padding-left: 10px;
		
	}
	.name{
		text-align: center;
		color: #4db5fb;
		padding-bottom: 15px;
		box-sizing: border-box;
	
		font-size: 12px;
	}
	.teacherimg{
		text-align: center;
	}
	.teacherimg image{
		width: 75px;
		height: 75px;
		    border-radius: 50%;
	}
	.detail{
		width: 100%;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
	}
page{
	width:100%;
	height: 100%;
}
.global{
	width:100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(239, 239, 239, 0.6901960784);
}
</style>
